<template>
  <div class = "ranks">
    <span class = "title-bold">官方榜</span>
    <!--榜单前五-->
    <div class = "rank-container">
      <div>
        <el-image style = "width: 150px; height: 150px" :src = "logo" fit = "fill" />
      </div>
      <div style = "width: 100%;">
        <ul class = "rank-ul">
          <router-link to = "/" class = "rank-li" v-for = "(item,index) in rankList[0]" :key = "item">
            <div>
              <span class = "index">{{ index + 1 }}</span>
              <span>{{ item.range }}</span>
              {{ item.name }}
            </div>
            <div>
              {{ item.singer }}
            </div>
          </router-link>
          <el-link :underline = "false">
            查看全部
            <i-right theme = "outline" size = "24" fill = "#838080" :strokeWidth = "3" strokeLinejoin = "miter" />
          </el-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import logo from '@/assets/logo.png'

const rankList = [
  [
    {
      name: '孤勇者',
      singer: '陈奕迅',
      range: '230%'
    }, {
    name: '孤勇者',
    singer: '陈奕迅',
    range: '230%'
  }, {
    name: '孤勇者',
    singer: '陈奕迅',
    range: '230%'
  }, {
    name: '孤勇者',
    singer: '陈奕迅',
    range: '230%'
  }, {
    name: '孤勇者',
    singer: '陈奕迅',
    range: '230%'
  },
  ]
]
</script>

<style lang = "less" scoped>
.ranks {
  display: flex;
  flex-direction: column;

  .title-bold {
    font-size: 20px;
    margin: 10px 0;
    font-weight: 600;
  }

  .rank-container {
    display: flex;
    margin-bottom: 50px;

    .rank-ul {
      margin-left: 20px;

      .rank-li {
        display: flex;
        justify-content: space-between;
        line-height: 30px;
        height: 30px;
        cursor: pointer;

        .index {
          font-size: 17px;
          padding: 10px 10px;

        }

        span {
          padding: 10px 20px;
        }

        // 榜单前三
        &:nth-child(-n+3) {
          span:nth-child(1) {
            color: var(--slider-button-color);
          }
        }

        &:nth-child(odd) {
          background-color: rgba(105, 103, 103, 0.05);
        }

        &:hover {
          background-color: rgba(110, 108, 108, 0.15);
        }
      }

      .el-link {
        margin: 10px 0;
      }
    }
  }
}
</style>